<template>
  <el-table
    v-loading="loading"
    :data="partnerList"
    empty-text
    :cell-style="{ padding: '2px 0', border: 'none' }"
    size="small"
    :header-cell-style="{ background: '#f4f6fa' }"
  >
    <el-table-column label="序号" type="index" width="80">
    </el-table-column>
    <el-table-column label="合作商名称" min-width="137" prop="name">
    </el-table-column>
    <el-table-column label="账号" min-width="132" prop="account">
    </el-table-column>
    <el-table-column label="设备数量" min-width="132" prop="vmCount">
    </el-table-column>
    <el-table-column label="分成比例" min-width="132" prop="ratio" :formatter="formatRatio">
    </el-table-column>
    <el-table-column label="联系人" min-width="132" prop="contact">
    </el-table-column>
    <el-table-column label="联系电话" min-width="132" prop="mobile">
    </el-table-column>

    <el-table-column label="操作" width="250">
      <template slot-scope="scope">
        <el-button type="text" @click="resetPassword(scope.$index, scope.row)"
          >重置密码</el-button
        >
        <el-button type="text" @click="handlePreview(scope.$index, scope.row)"
          >查看详情</el-button
        >
        <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button
        >
        <el-button type="text" @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { updatePwd } from '@/api/dianwei'
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    partnerList: {
      type: Array,
      required: true
    }
  },
  methods: {
    resetPassword (index, row) {
      this.$confirm('确定要重置合作商密码吗？', {
        type: 'warning',
        showClose: false
      }).then(async () => {
        await updatePwd(row.id)
        this.$message.success('重置成功')
      }).catch(err => {
        console.log(err)
      })
    },
    handlePreview (index, row) {
      this.$emit('handlePreview', index, row)
    },
    handleEdit (index, row) {
      this.$emit('handleEdit', index, row)
    },
    async handleDelete (index, row) {
      try {
        await this.$confirm('确定要删除吗？')
        this.$emit('handleDelete', index, row)
      } catch (e) {
        console.log(e)
      }
    },
    formatRatio (row, column, cellValue, index) {
      return cellValue + '%'
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
    font-size: 14px !important;
    ::v-deep .el-table__header {
      height: 42px;
      .is-leaf.el-table__cell {
        border: none;
      }
    }
    ::v-deep .el-table__row {
      height: 44px;
    }
    ::v-deep .cell {
      color: rgb(102, 102, 102) !important;
      .el-button--text {
        color: #5f84ff;
      }
      .el-button--text:last-child {
        color: #ff5a5a;
      }
    }
    ::v-deep .el-table__body-wrapper.is-scrolling-left {
      overflow-x: hidden !important;
    }
  }
</style>
<style lang="scss">
.el-message-box{
  width: 297px;
  height: 165px;
  box-sizing: border-box;
  padding:0 18px 42px 17px;
  border-radius: 4px;
}
.el-message-box__status.el-icon-warning{
  // padding-top: 2px;
  padding-right: 17px;
  color: #ff665f !important;
  font-size: 20px !important;
  }
.el-message-box__message{
  font-size: 15px;
  color: black;
}
.el-message-box__btns{
  text-align: center;
  margin-top: 20px;
  .el-button--primary{
    background: #6783f7;
  }
}
</style>
